<script setup>
import "../noumenon/Nou.css";
</script>

<template>
  <lay-menu
      v-model:selected-key="selectedKey"
      v-model:open-keys="openKeys1"
      class="navigation"
  >
    <lay-menu-item>游戏主机</lay-menu-item>
    <lay-menu-item>电脑品牌</lay-menu-item>
    <lay-menu-item>整机</lay-menu-item>
    <lay-menu-item>笔记本</lay-menu-item>
    <lay-menu-item>存储</lay-menu-item>
    <lay-menu-item>外设</lay-menu-item>
    <lay-menu-item>主板</lay-menu-item>
    <lay-menu-item>显卡</lay-menu-item>
  </lay-menu>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedKey = ref("5");
    const openKeys1 = ref(["7"]);
    return {
      selectedKey,
      openKeys1
    };
  }
};
</script>

<style scoped>
/* 自定义 lay-menu 边框圆角 */
.navigation {
  margin-top: 10px;
  border-radius: 12px; /* 设置圆角半径 */
  overflow: hidden;    /* 防止内容溢出影响圆角 */
}

/* 修改 lay-menu-item 的样式，使其圆角更和谐 */
.navigation .lay-menu-item {
  border-radius: 6px; /* 可选：给单个菜单项也设置圆角 */
}
</style>
